<!-- 产品序列号选择 -->
<template>
  <div class="serialNumOperate">
    <div class="common-modal-sub-title">
      <i class="el-icon-vertical-bar"></i>
      <div class="sub-title">
        产品序列号操作<span class="add-text">（已添加产品序列号：{{ data.length }}条）</span>
      </div>
    </div>
    <avue-crud v-model="form" ref="crud" :option="option" :defaults.sync="defaults" :data="data" :page.sync="page" @selection-change="selectionChange">
      <!-- 追溯，详情 -->
      <template slot="menu">
        <el-button type="text" size="small" @click="handleAppend">追溯</el-button>
        <el-button type="text" size="small" @click="handleDetail">详情</el-button>
      </template>
      <template slot="menuLeft">
        <el-button type="primary" size="small" icon="el-icon-position" @click="handleJumpProcess">跳转工序</el-button>
        <el-button type="warning" size="small" icon="el-icon-lock" @click="handleLock">锁定产品序列号</el-button>
        <el-button type="primary" size="small" icon="el-icon-unlock" @click="handleUnLock">解锁产品序列号</el-button>
      </template>
    </avue-crud>
    <!-- 弹框 -->
    <common-modal-template ref="commonModalTemplate" title="请选择工站">
      <avue-form :option="commonOption" v-model="commonForm" @submit="commonSubmit"></avue-form>
    </common-modal-template>
  </div>
</template>

<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template2.vue';
export default {
  components: {
    CommonModalTemplate
  },
  props: {
    receiveData: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    receiveData: {
      handler(newData) {
        if (this.data && this.data.length > 0) {
          let addData = newData.filter((n) => {
            return !this.data.map((d) => d.id).includes(n.id);
          });
          if (addData && addData.length > 0) {
            this.data = this.data.concat(addData);
          }
        } else {
          this.data = this._cloneDeep(newData);
        }
        this.page.total = this.data.length;
      }
    }
  },
  data() {
    return {
      form: {},
      query: {},
      defaults: {},
      data: [],
      tableOption: '锁定原因',
      page: {
        layout: 'total, prev, pager, next',
        pageSize: 10000000,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchMenuSpan: 6,
        searchShow: true,
        selection: true,
        border: true,
        index: true,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchBtn: false,
        emptyBtn: false,
        refreshBtn: false,
        columnBtn: false,
        dialogClickModal: false,
        menu: true,
        menuWidth: 100,
        labelWidth: 150,
        column: [
          {
            label: '产品序列号',
            prop: 'lockDetail',
            order: 1,
            searchSpan: 8,
            searchLabelWidth: 95
          },
          {
            label: '类型',
            prop: 'lockedType'
          },
          {
            label: '当前工序',
            prop: 'lockedBy',
            order: 2,
            searchSpan: 8,
            type: 'select'
          },
          {
            label: '下一工序',
            prop: 'lockedTime'
          },
          {
            label: '上一工序',
            prop: 'lockedReason'
          },
          {
            label: '上一工序过站时间',
            prop: 'status',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          {
            label: '上一工序过站工位',
            prop: 'unlockedBy'
          },
          {
            label: '状态',
            prop: 'unlockedTime',
            slot: true,
            searchSpan: 8,
            order: 3,
            type: 'select'
          },
          {
            label: '锁定原因',
            prop: 'unlockedRemark',
            slot: true
          }
        ]
      },
      commonOption: {
        labelWidth: 80,
        column: [
          {
            label: '工站',
            type: 'select',
            prop: 'work'
          }
        ]
      },
      commonForm: {}
    };
  },
  computed: {
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    handleAppend(row) {},
    handleDetail(row) {},
    // 跳转工序
    handleJumpProcess() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$refs.commonModalTemplate.showModal();
      // this.$confirm('确定将选择数据删除?', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     let ids = this.selectionList.map((s) => s.id);
      //     return remove(ids);
      //   })
      //   .then(() => {
      //     this.onLoad(this.page);
      //     this.$message({
      //       type: 'success',
      //       message: '操作成功!'
      //     });
      //     this.$refs.crud.toggleSelection();
      //   });
    },
    handleLock() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$refs.commonModalTemplate.showModal();
    },
    handleUnLock() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$refs.commonModalTemplate.showModal();
    },
    selectionChange(list) {
      this.selectionList = list;
      this.$emit('operateSelectChange', this.selectionList);
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    deleteData(selectData) {
      this.$nextTick(() => {
        this.data = this.data.filter((d) => {
          return !selectData.map((s) => s.id).includes(d.id);
        });
        this.page.total = this.data.length;
      });
    },
    // 锁定原因弹框 配置
    openLockedReasonModal(id) {
      this.tableOption = '锁定原因';
      this.commonOption.option = {
        title: '锁定原因',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '锁定原因',
            prop: 'lockedReason',
            type: 'textarea',
            minRows: 3,
            span: 24,
            disabled: true,
            maxRows: 3
          }
        ]
      };
      this.$refs.commonModalTemplate.showModal();
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            this.commonForm.lockedReason = data.lockedReason;
            console.log(data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 锁定详情弹框 配置
    openLockedDetailModal(id) {
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            let lockedObjects = null;
            this.tableOption = '锁定对象';
            switch (data.lockedType) {
              case 'PRODUCT':
                this.tableOption = '锁定对象（产品条码）';
                break;
              case 'MATERIAL':
                this.tableOption = '锁定对象（物料条码）';
                break;
              case 'WORKORDER':
                this.tableOption = '锁定对象（工单号）';
                break;
              case 'ROUTE':
                this.tableOption = '锁定对象（工序）';
                break;
              default:
                break;
            }
            if (data.lockedType == 'PRODUCT' || data.lockedType == 'MATERIAL') {
              this.codeList = JSON.parse(data.lockedObjects || '[]');
            } else {
              this.codeList = JSON.parse(data.lockedObjects || '{}');
            }
            console.log(this.codeList);
            this.$refs.commonModalTemplate.showModal();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 解锁说明弹框 配置
    openUnLockedReasonModal(id) {
      this.tableOption = '解锁说明';
      this.commonOption.option = {
        title: '解锁说明',
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: '解锁说明',
            prop: 'unlockedRemark',
            type: 'textarea',
            minRows: 3,
            span: 24,
            disabled: true,
            maxRows: 3
          }
        ]
      };
      this.$refs.commonModalTemplate.showModal();
      getDetail(id)
        .then((res) => {
          if (res && res.status == 200) {
            let data = res.data.data;
            this.commonForm.unlockedRemark = data.unlockedRemark;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.serialNumOperate {
  // width: 48%;
  .common-modal-sub-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .el-icon-vertical-bar {
      height: 20px;
      &::before {
        width: 5px;
        height: 100%;
      }
    }
    .sub-title {
      margin-left: 10px;
      font-size: 18px;
      font-weight: bold;
      .add-text {
        font-size: 16px;
      }
    }
  }
}
</style>
